<template>
<!-- 字典 -->
  <v-select-table-page v-model="customValue" showValue="DictName" :options="options" :column="column"
                       :multiple="multiple" :showHeader="showHeader" :placeholder="$attrs.placeholder"
                       :clickValue="clickValue" ref="SelectProject"
                       @selectChange="selectChange"></v-select-table-page>
</template>

<script>
import vSelectTablePage from '@/components/element/vSelectT/vSelectTablePage'
export default {
  name: "DictionarySelect",
  components: {
    vSelectTablePage
  },
  props: {
    // 重新加载数据（每次取非即可）
    reload: {
      type: Boolean,
      default: function () {
        return false
      }
    },
    dictTypeCode: {
      type: [String, Number],
      default: function () {
        return ''
      }
    },
    value: {
      type: [String, Number, Array],
      default: function () {
        return undefined
      }
    },
    column: {
      type: [Array, Object, String],
      default: function () {
        return 'DictName'
      }
    },
    multiple : {
      type: Boolean,
      default: function () {
        return false
      }
    },
    showHeader: {
      type: Boolean,
      default: function () {
        return false
      }
    },
    clickValue: {
      type: [String, Array],
      default: function () {
        return 'DictId'
      }
    }
  },
  data () {
    return {
      options: []
    }
  },
  mounted () {
    this.$nextTick(async function () {
      await this.loadOptions()
      this.$refs.SelectProject.getTableData()
    })
  },
  computed: {
    customValue: {
      get: function () {
        return this.value
      },
      set: function (value) {
        this.$emit('input', value)
      }
    }
  },
  methods: {
    async loadOptions () {
      if (this.dictTypeCode && this.dictTypeCode !== '') {
        let res = await this.$store.dispatch('GetDictItems', this.dictTypeCode)
          res.sort((a, b) => a.sortNo - b.sortNo)
          this.getTipTxtValueArea(res)
          this.getSelectChange(res)
        this.options = JSON.parse(JSON.stringify(res))
      } else {
        this.options = []
      }
    },
    getSelectChange (val) {
      let $this = this
      let selectItems = null
      if (val.length > 0) {
        if (!this.multiple) {
          selectItems = val.find(it => {
            return $this.customValue === it['DictId']
          })
        } else {
          selectItems = val.filter(it => {
            var isTrue = ($this.customValue || []).filter(kit => {
              return kit === it['DictId']
            }).length > 0
            return isTrue
          })
        }
        if ($this.name && $this.customValue) {
          this.$emit('selectChanged', this.customValue, this.name, selectItems, this.bufferParams)
        }
      }
    },
    getTipTxtValueArea (list) {
      if (this.multiple && !this.UtilJs.isEmpty(this.customValue) && this.customValue.length !== 0) {
        let tipStr = ''
        this.customValue.forEach(id => {
          list.forEach(item => {
            if (item.DictId === id) {
              tipStr = tipStr + item.DictName + '<br/>'
            }
          })
        })
        this.tipTxtValueArea = tipStr
      } else {
        this.tipTxtValueArea = ''
      }
    },
    selectChange (value) {
      this.$emit('selectChanged', value)
    }
  },
  watch: {
    reload: {
      handler (n, o) {
        this.$nextTick(async function () {
          await this.loadOptions()
          this.$refs.SelectProject.getTableData()
        })
      }
    }
  }
}
</script>

<style scoped>

</style>
